<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form action="#" id="formlogin">
    <input type="text" name="username">
    <input type="password" name="password">
    <button>提交</button>
  </form>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    // http://www.liulongbin.top:3006/api/formdata


    // json
    // 原始表单 ?xxxx=xxx&yyyh=xydf
    let btn = document.querySelector('button')
    btn.addEventListener('click', function (e) {
      // 这里演示一步获取formdata数据
      e.preventDefault()
      // let formData = new FormData(formlogin)

      // // 注意，普通的对象，不能通过for of遍历出来
      // // keys()获取的是所有的键
      // console.log(formData.keys());
      // for (const key of formData.keys()) {
      //   console.log(key);
      // }
      // // entries()获取的是所有的键值对
      // console.log(formData.entries());
      // for (const [k, v] of formData.entries()) {
      //   console.log(k,v);
      // }

      // 这里演示分步获取formdata数据
      let username = document.querySelector('[type="text"]').value
      let password = document.querySelector('[type="password"]').value

      let formdata = new FormData()
      formdata.append('username', username)
      formdata.append('password', password)

      axios.post(' http://www.liulongbin.top:3006/api/formdata', formdata)
        .then(res => {
          console.log(res);
        })
    })

  </script>
</body>

</html>